/* 全局基础样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fcfbe9; 
  color: #333;
  overflow-y: auto; /* 页面可垂直滚动 */
}

.container {
  width: 1200px;
  margin: auto auto;
  position: relative; /* 为右侧绝对定位元素提供参考 */
  background-color: #fdfce8;
  border:#d6d3c4 solid 1px;
}

/* 顶部搜索栏 */
.container1 {
  /* background-color: #ffffff; */
  padding: 15px 0;
  text-align: center; /* 搜索框居中 */
}

.search-box input {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  width: 220px;
  font-size: 14px;
  border: #d6d3c4 solid 1px;
}

/* 导航栏 */
.container2 nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #62c364;
  display: flex;
  justify-content: center; /* 导航栏居中 */
  flex-wrap: wrap; 
}

.container2 nav ul li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
  border: #8c8c89 solid 2px;
  border-radius: 5%;
}

.container2 nav ul li a:hover {
  background-color: #62c364;
  border: black solid 2px;
  border-radius: 5%;
}

/* 中间主要内容区（左侧集中排列） */
.main-content {
  width: 100%;
  margin: auto auto;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; /* 内容水平居中 */
  padding: 0px;
  box-sizing: border-box;
}

/* 圆形按钮 */
.circle-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #68bdf3;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  margin: 15px;
  transition: all 0.3s ease;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.circle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.often_use{
    /* background-color: #fff; *//*显示位置*/
    width: 100%;
    height: auto;
    display: flex;
}
/* 卡片（A1-A6） */
.card {
  width: 220px;
  height: 180px;
  background-color: #c3fdee;
  margin: 0px 20px 20px 20px;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  border-radius: 4%;
  border: 1px solid #90caf9;
  transition: transform 0.3s ease;
  /* text-align: center; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card a {
  text-decoration: none;
  color: #212121;
  font-weight: 500;
  font-size: 15px;
}

/* 右侧固定模块：作者自述 + 今日任务 */
.container3, .container4 {
  background-color: #e0e0e0; /* 浅灰色背景，区分模块 */
  padding: 15px;
  border-radius: 4px;
  position: absolute;
  right: 50px;          /* 距离页面右侧的距离 */
  width: 220px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.container3 {
  top: 160px; /* 调整距离顶部的位置，避免遮挡导航 */
  position: fixed;
}

.container4 {
  top: 400px; /* 调整距离顶部的位置，与“作者自述”垂直分布 */
  position: fixed;
}



.switch-btn:hover {
  text-decoration: underline;
}

/* 底部联系方式 */
.contact {
  background-color: #fed5bf;
  padding: 15px;
  margin: 20px auto;
  width: auto;          /* 与中间内容区宽度一致，视觉统一 */
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.contact h3 {
  margin-top: 0;
}



/* 其他页面通用内容区（如 project.html 等） */
.other-page-content {
  margin: 30px auto;
  width: 70%;
  padding: 20px;
  background-color: #fdfce8;
  border-radius: 6px;
  box-sizing: border-box;
}

.other-page-content h1 {
  color: #62c364;
}